<template>
  <view class="wrap">
    <view v-if="isVideo">
      <video
        class="video" 
        :src="video"
        :controls="true"
        object-fit="cover"
        :show-mute-btn="true"
        :object-fit="cover"
        :title="title"
        :enable-play-gesture="true"
        :show-center-play-btn="true"></video>
    </view>
    <view v-for="item in list" :key="item" v-else>
      <image style="width: 100vw" :src="item" :lazy-load="true" mode="widthFix"></image>
    </view>
  </view>
</template>

<script>

export default {
  data() {
    return {
      list: [],
      video: '',
      isVideo: false,
      playingId: '',
      title: '',
    }
  },
  onLoad() {
    const _that = this;
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.on('detail', ({ data }) => {
      console.log('eventChannel', data)
      const { title, content, type, fileType } = data || {};
      uni.setNavigationBarTitle({ title });
      const isVideo = `${fileType}` === '2';
      if (isVideo) {
        _that.video = content;
      } else {
        _that.list = content ? content.split(',') : [];
      }
      _that.isVideo = isVideo;
      _that.title = title;
    })
  },
  methods: {
    onPlay(id) {
      this.playingId = id;
    },
    onPause() {
      this.playingId = '';
    },
  },
}
</script>

<style lang="scss" scoped>
.wrap{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f2f2f2;
  font-size: 0;
}
.video {
  width: 100vw;
  background-color: #fff !important;
  height: 100vh;
}
</style>
